<template>
  <div class="news">
    <div class="header">
      <table>
        <tr>
          <td >
			  <button class="icon-button" @click="handleClick">
			      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16" >
			        <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
			      </svg>
			    </button>
		  </td>
          <td style="text-align: center;font-size: xx-large;">{{ title }}</td>
          <td style="text-align: right">
            <button class="publish-button" @click="publish">{{ publishButtonText }}</button>
          </td>
        </tr>
      </table>
    </div>
    <div class="text">
      <textarea v-model="content":placeholder="placeholderText"></textarea>
    </div>
    <div class="picture">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16">
        <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
        <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
      </svg>
    </div>
  </div>
</template>

<script>	
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      title: '发动态',
      publishButtonText: '发布',
      placeholderText: '和币友一起分享我的币圈见闻，支持图文和短视频',
	  content: '',
    };
  },
  methods: {
     publish() {
          if (this.content.trim() === '') {
            ElMessage({
              message: "发布内容不能为空！",
              type: "info",
              duration: 2000,
            	offset: 50
            });
          } else {
            console.log('输入的内容是：', this.content);
			ElMessage({
			  message: "发布成功！",
			  type: "success",
			  duration: 2000,
				offset: 50
			});
			setTimeout(() => {
			          this.$router.push('/news');
			        }, 1500); // 延迟跳转，确保用户能看到提示信息
          }
        },
	handleClick() {
	      // 使用 Vue Router 跳转到 /news 页面
	      this.$router.push('/news');
	    }
  },
};
</script>

<style scoped>

td svg {
  width: 32px;  /* 控制图标的宽度 */
  height: 32px; /* 控制图标的高度 */
}	
.news {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 80%; /* 调整宽度以适应大屏幕 */
  margin: 0 auto; /* 居中对齐 */
}

.header table {
  width: 100%;
}

.header table td {
  width: 33%;
}

.icon-button {
  cursor: pointer;
  padding: 5px;
  border: none;
  background-color: transparent; /* 背景透明 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: inherit; /* 继承父元素的颜色 */
  margin-left: -90%;
}

/* 鼠标悬停时稍微放大图标 */
.icon-button svg {
  color: inherit; /* 保持图标的颜色 */
  transition: transform 0.2s ease;
}

.icon-button:hover {
  transform: scale(1.1); /* 鼠标悬停时放大 */
}

.publish-button {
  background-color: #E93C3E;
  color: #F9FAFC;
  font-family: "Arial Black";
  border: none;
  padding: 10px 20px; /* 增加按钮的大小 */
  font-size: 16px; /* 增加字体大小 */
  cursor: pointer;
  margin-right: -13.5%;
}
.publish-button:hover {
  background-color: #D63131; /* 鼠标悬停时改变背景色 */
}

.text textarea {
  margin-top: 20px; /* 增加间距 */
  width: 100%;
  height: 150px; /* 增加文本框的高度 */
  border: 1px solid #ccc; /* 添加边框 */
  outline: none;
  resize: none;
  font-size: 16px; /* 增加字体大小 */
  padding: 10px; /* 添加内边距 */
}

.picture svg {
  width: 40px;  /* 设置宽度 */
  height: 40px; /* 设置高度 */
  color: dimgray;
}


.footer {
  position: fixed;
  bottom: 20px; /* 离底部有一定距离 */
  left: 50%;
  transform: translateX(-50%); /* 居中对齐 */
  background-color: #fff;
  padding: 10px;
}

.footer img {
  width: 30px;
  height: 30px;
}
</style>
